<script setup lang="ts">
    import { reactive, defineProps, onMounted, computed } from 'vue';
    import { useCommentStore } from '@/stores/comment';
    import { CommentParam } from '@/services/type';

    import Item from '@/components/CommentBox/List/Item/index.vue';

    const commentStore = useCommentStore();

    // 配置props
    const { wznm, type } = defineProps<{wznm?: string, type: number}>();

    // 用户评论(回复)参数
    const commentParam = reactive<CommentParam>({
        // 评论文本信息
        text: '',
        // 父评论下标
        index: 0,
        // 子评论下标
        subIndex: 0,
        // 类型
        type: ''
    });
    // 分页参数
    const pageParam = reactive({
        // 是否到底了
        isLast: false,
        // 游标值
        cursor: '',
        // 初始数量
        size: 3
    });
    // 加载参数
    const loadMore = reactive({
        loadName: "点击加载更多",
        loading: false,
        disabled: false
    });

    const data = computed(() => commentStore.commentList);

    // 监控评论框是否显示触发事件
    const hanlderReplyIsShow = (i: number, j: number, type: string, isShow: boolean) => {
        commentParam.text = '';
        if(isShow) {
            if(commentParam.type != null && commentParam.type === 'parent') {
                commentStore.commentList[commentParam.index]._show = false;
            }else if(commentParam.type != null && commentParam.type === 'child') {
                commentStore.commentList[commentParam.index].children[commentParam.subIndex]._show = false;
            }
            commentParam.index = i;
            commentParam.subIndex = j;
            commentParam.type = type;
        }
        if(type != null && type === 'parent') {
            commentStore.commentList[i]._show = !commentStore.commentList[i]._show;
        }else if(type != null && type === 'child') {
            commentStore.commentList[i].children[j]._show = !commentStore.commentList[i].children[j]._show;
        }
    }

    // 加载数据
    const load = async() => {
        loadMore.loading = true;
        loadMore.loadName = "加载中..."
        // 加载评论信息
        await commentStore.getCommentList({ wznm, type }, false);
        loadMore.loading = false;
        if(commentStore.isLast) {
            loadMore.disabled = true;
            loadMore.loadName = "已经到底了";
        } else {
            loadMore.loadName = "点击加载更多";
        }
    }

    onMounted(async () => {
        // 初始化评论信息
        await commentStore.getCommentList({ wznm, type }, true);
        if(commentStore.isLast) {
            loadMore.disabled = true;
            loadMore.loadName = "已经到底了";
        } else {
            loadMore.loadName = "点击加载更多";
        }
    });
    
</script>
<template>
    <section class="sideTab">
        <template v-if="data.length != 0">
            <div class="sideTab-title">
                评论列表 
            </div>
            <div class="commentList">
                <div class="comments">
                    <item  
                        v-for="(item, i) in data" 
                        :key="i" 
                        :item="item" 
                        :i="i" 
                        :type="type"
                        :wznm="wznm"
                        @hanlderReplyIsShow="hanlderReplyIsShow"
                    />
                </div>   
                <div class="load-more" v-if="!pageParam.isLast">
                    <el-button type="primary" 
                        :loading="loadMore.loading" 
                        style="margin-top: 15px;width: 150px;"
                        :disabled="loadMore.disabled"
                        @click="load"
                    >
                        {{loadMore.loadName}}
                    </el-button>
                </div>
            </div>
        </template>
        <template v-if="data.length == 0">
            <div class="noComment">
                <label>还没有人评论？赶快抢个沙发~</label>
            </div>
        </template>
    </section>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />